<template>
    <el-dialog :title="titleShow" :visible.sync="vm.dialogFormVisible" @open="openHandle()" @close="closeHandle()">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="设备名称" :label-width="formLabelWidth" prop="dname">
                <el-input v-model="form.dname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="设备状态" :label-width="formLabelWidth" prop="price">
                <el-switch
                    v-model="form.status"
                    active-text="开启"
                    inactive-text="关闭"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="选择设备所在工地" :label-width="formLabelWidth" prop="wid">
                <el-select v-model="form.wid" placeholder="请选择工地">
                    <el-option
                        v-for="item in vm.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="vm.dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handle()" :loading="loading">{{this.vm.isAdd?'添加':'修改'}}</el-button>
        </div>
    </el-dialog>
</template>

<script>

export default ({
    props: ['vm'],
    data() {
        return {
            form: {
                dname: '',
                status: false,
                wid: ''
            },
            formLabelWidth: '150px',
            loading: false,
            rules: {
                dname: [
                    { required: true, message: '设备名称不能为空', trigger: 'change' }
                ],
                wid: [
                    { required: true, message: '请选择工地', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        openHandle() {
            if(!this.vm.isAdd){
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8080/device/find',
                    data: {
                        did: this.vm.selDid
                    },
                    headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                    }
                }).then((response) => {
                    if(response.data){
                        this.form.dname = response.data.dname || ''
                        this.form.status = response.data.status == 1? true :false
                        this.form.wid = response.data.wid || ''
                    }
                })
            }
        },
        closeHandle() {
            this.$refs.form.resetFields()
        },
        handle() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    if(this.vm.isAdd){
                        this.add()
                    }else{
                        this.update()
                    }
                }
            })
        },
        add() {
            this.axios({
                method: 'post',
                url: 'http://localhost:8080/device/add',
                data: {
                    ...this.form,
                    status: this.form.status? 1 : 0
                },
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                }
            }).then((response) => {
                if(response.data&&response.data.code === 1000){
                    this.$message.success('添加成功')
                }else{
                    this.$message.error('添加失败')
                }
                this.vm.fetchData()
                this.vm.dialogFormVisible = false
                this.loading = false
            }).catch((err) => {
                this.$message.error('添加失败')
                this.vm.fetchData()
                this.vm.dialogFormVisible = false
                this.loading = false
            })
        },
        update() {
            this.axios({
                method: 'post',
                url: 'http://localhost:8080/device/update',
                data: {
                    ...this.form,
                    status: this.form.status? 1 : 0,
                    did: this.vm.selDid
                },
                headers: {
                'Content-Type': 'application/json;charset=utf-8'
                }
            }).then((response) => {
                if(response.data&&response.data.code === 1000){
                    this.$message.success('修改成功')
                }else{
                    this.$message.error('修改失败')
                }
                this.vm.fetchData()
                this.vm.dialogFormVisible = false
                this.loading = false
            }).catch((err) => {
                this.vm.$message.error('修改失败')
                this.vm.fetchData()
                this.vm.dialogFormVisible = false
                this.loading = false
            })
        }
    },
    computed: {
        titleShow() {
            return this.vm.isAdd?'添加设备':'修改设备'
        }
    },
    
})
</script>
